<template>
  <div class="notifications-page">
    <section class="inbox-notifications-com" id="page" ref="page">
      <!-- 头部导航栏 -->
      <HeaderCom ref="headerCom" />
      <div class="bannerBox">
        <img
          src="../researchResult/assets/images/banner-2.png"
          class="banner"
        />
      </div>
      <img
        src="@/assets/images/student/upTop.png"
        class="upTop"
        @click="upTop"
        id="upTop"
      />
      <div class="content-page">
        <!-- 面包屑 -->
        <BreadNav :breadList="breadList" style="padding: 24px 0 32px" />
        <span class="page-title">站内信</span>
        <div class="tabs-bar">
          <Tabs
            :typeList="[
              {
                id: null,
                name: '全部',
              },
              ...typeList,
            ]"
            :activeName="activeName"
            @changeActivePannel="changeActivePannel"
          />
          <span class="add-btn" @click="handleLeaveMsg">新增留言</span>
        </div>
        <div class="list-form-content">
          <div class="main-content" v-if="flag">
            <div class="top-btns">
              <span class="btn remak-checked" @click="handleRemarkReaded"
                >标记已读</span
              >
              <span class="btn remak-all-checked" @click="handleRemarkAllReaded"
                >全部已读</span
              >
            </div>
            <div class="has-content" v-if="msgList && msgList.length > 0">
              <ListContent
                v-model="msgList"
                style="width: 50%; margin-right: 20px"
                :msgList="msgList"
                :statusEnmu="statusEnmu"
                @handleClickItem="handleClickItem"
              />
              <RightContent
                v-if="currentDetail.id"
                style="margin-left: 20px"
                :detail="currentDetail"
                @handleReply="handleReply"
              />
            </div>
            <div v-else class="empty-content">
              <el-empty style="margin: 50px 0" description="无数据"></el-empty>
            </div>
            <Pagination
              v-if="msgList && msgList.length > 0"
              style="margin: 48px 0"
              :page="page"
              :limit="limit"
              :total="total"
              :pageSizes="[20, 100, 300, 500]"
              v-on:handleChildGetList="handleParentGetList"
            >
            </Pagination>
          </div>
          <EmptyStatus style="width: 100%; margin-top: 150px" v-else />
        </div>
      </div>
      <div class="mobile-notifications">
        <Tabs
          :typeList="[
            {
              id: null,
              name: '全部',
            },
            ...typeList,
          ]"
          :activeName="activeName"
          @changeActivePannel="changeActivePannel"
        />
        <div class="mobile-top-btns">
          <div class="btn-left">
            <span class="btn remak-checked" @click="handleRemarkReaded"
              >标记已读</span
            >
            <span class="btn remak-all-checked" @click="handleRemarkAllReaded"
              >全部已读</span
            >
          </div>
          <div class="btn-right">
            <span class="add-btn" @click="handleLeaveMsg">新增留言</span>
          </div>
        </div>
        <div class="notifications-list">
          <div class="has-content" v-if="msgList && msgList.length > 0">
            <ListContent
              v-model="msgList"
              :msgList="msgList"
              :statusEnmu="statusEnmu"
              @handleClickItem="handleClickItem"
            />
          </div>
          <div v-else class="empty-content">
            <van-empty
              class="custom-image"
              image="https://img.yzcdn.cn/vant/custom-empty-image.png"
              description="暂无数据"
            ></van-empty>
          </div>
        </div>
      </div>
      <div class="mainFooter" id="pageFooter">
        <FooterMenu />
      </div>
      <AddMsgPop
        ref="addMsgPop"
        :typeList="ableSelectList"
        @handleSubmit="handleSubmit"
      />
      <el-dialog
        title=""
        :visible.sync="confirmVisiable"
        width="30%"
        :before-close="() => (confirmVisiable = false)"
      >
        <span>提交成功</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleBackHome">返回首页</el-button>
          <el-button @click="handleViewDetail">查看留言</el-button>
        </span>
      </el-dialog>
    </section>
    
  </div>
</template>

<script>
import Vue from "vue";
import HeaderCom from "@/components/header";
import vueMiniPlayer from "vue-mini-player";
import "vue-mini-player/lib/vue-mini-player.css";
import Tabs from "./components/tabs.vue";
import ListContent from "./components/list-content.vue";
import BreadNav from "@/components/breadNav";
import EmptyStatus from "@/components/emptyStatus";
import FooterMenu from "@/components/footerMenu/index.vue";
import Pagination from "@/views/components/pagination";
import RightContent from "./components/right-content.vue";
import AddMsgPop from "./add-msg-pop.vue";
import { Dialog, Empty, Toast } from "vant";
Vue.use(Empty);
Vue.use(Toast);
import {
  getInnerMsgList,
  getInnerMsgDetail,
  innerMsgReply,
  putInnerMsg,
  getMsgType,
  changeMessageStatus,
  allchangeMessageStatus,
} from "@/request/api";
Vue.use(vueMiniPlayer);
// import { getStudentShow } from "../../request/api";

export default {
  // 组件名称
  name: "InboxNotifications",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    HeaderCom,
    Tabs,
    ListContent,
    BreadNav,
    EmptyStatus,
    FooterMenu,
    Pagination,
    RightContent,
    AddMsgPop,
    [Dialog.Component.name]: Dialog.Component,
  },
  // 组件状态值
  data() {
    return {
      breadList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "用户中心",
          path: "/userCenter",
        },
        {
          name: "站内信",
          path: "",
        },
      ],
      activeIndex: 0,
      msgList: [],
      activeName: "0",
      checkAll: false,
      isIndeterminate: true,
      flag: true,
      page: 1,
      total: 0,
      limit: 10,
      currentId: "",
      statusEnmu: {
        // 消息状态0 学生发起运营未读 1运营已读 2运营回复 学生未读 3学生已读 4学生回复运营未读 5系统消息 这个就是这个状态的
        0: "未读",
        1: "已读",
        2: "已回复",
        3: "学生已读",
        4: "学生回复运营未读",
        5: "系统消息",
      },
      currentDetail: {},
      typeList: [],
      ableSelectList: [],
      type: null,
      confirmVisiable: false,
    };
  },
  async created() {
    this.init();
    await this.getList();
    let clientW = document.body.clientWidth;
    if (clientW > 768) { // pc端自动读取第一条站内信并更新头部的未读标识
      this.currentId = this.msgList[0] && this.msgList[0].id;
      this.getInnerMsgDetail();
    }
  },
  // 组件方法
  methods: {
    async handleLeaveMsg() {
      this.typeList = await this.getTypeList();
      this.ableSelectList = this.typeList.filter((v) => v.id !== 1);
      const clientW = document.body.clientWidth;
      if (clientW > 768) {
        this.$refs.addMsgPop && this.$refs.addMsgPop.open();
      } else {
        // 跳转新增留言界面
        this.$router.push({ name: "addNotification" });
      }
    },
    async init() {
      this.upTop();
      this.typeList = await this.getTypeList();
      this.ableSelectList = this.typeList.filter((v) => v.id !== 1);
    },
    // 获取栏目列表
    async getTypeList() {
      let typeList = [];
      const { code, data } = await getMsgType();
      if (code !== 0 || !data) {
        typeList = [];
      } else [(typeList = data)];

      return typeList;
    },
    upTop() {
      window.scrollTo(0, 0);
    },
    async getList() {
      let studentId = localStorage.getItem("userId");
      const { code, data } = await getInnerMsgList({
        pageNo: this.page,
        pageSize: this.limit,
        type: this.type,
        studentId,
      });
      if (code !== 0 || !data || data.list.length === 0) {
        this.msgList = [];
        this.total = 0;
        return;
      }
      this.msgList = data.list.map((v) => {
        return {
          ...v,
          isChecked: false,
        };
      });
      this.total = data.total;

      if (!this.currentId) {
        this.currentId = this.msgList[0].id;
        this.getInnerMsgDetail();
      }
    },
    async getInnerMsgDetail() {
      const { code, data } = await getInnerMsgDetail({ id: this.currentId });
      if (code !== 0 || !data) {
        this.currentDetail = {};
        return;
      }
      this.currentDetail = data;
      // 刷新列表，更新已读状态
      this.getList();
    },

    async handleReply({ remark, clearRemark }) {
      const { code, data, msg } = await innerMsgReply({
        fileUrl: this.currentDetail.fileUrl,
        messageId: this.currentDetail.id,
        phone: this.currentDetail.phone,
        remark,
        reply: this.currentDetail.reply,
        studentName: this.currentDetail.studentName,
      });
      if (code !== 0) {
        this.$message.error(msg);
        return;
      }
      clearRemark && clearRemark();
      this.getInnerMsgDetail();
    },
    handleBackHome() {
      this.confirmVisiable = false;
      this.$refs.addMsgPop && this.$refs.addMsgPop.close();
      this.$router.push("/");
    },

    async handleViewDetail() {
      this.$refs.addMsgPop && this.$refs.addMsgPop.close();
      this.confirmVisiable = false;
      this.page = 1;
      await this.getList();
      this.currentId = this.msgList[0] && this.msgList[0].id;
      this.getInnerMsgDetail();
    },
    async handleSubmit({ params }) {
      const { code, msg } = await putInnerMsg(params);
      if (code !== 0) {
        this.$message.error(msg);
        return;
      }
      this.$message.success("保存成功");
      this.confirmVisiable = true;
    },

    async changeActivePannel({ activeName, item }) {
      this.activeName = activeName;
      this.type = item.id;
      this.currentId = "";
      this.resetData();
    },
    handleParentGetList(page, limit) {
      this.page = page;
      this.limit = limit;
      this.getList();
    },
    handleClickItem(item) {
      const clientW = document.body.clientWidth;
      this.currentId = item.id;
      if (clientW > 768) {
        this.getInnerMsgDetail();
      } else {
        this.$router.push({ name: "inboxNotificationsDetails", query: { id: item.id }});
      }
    },
    async handleRemarkAllReaded() {
      const clientW = document.body.clientWidth;
      if (clientW > 768) {
        // pc端的确认弹窗
        this.$confirm("是否确认全部标为已读状态?", "提示").then(async () => {
          // this.confirmRead(ids);
          const { code, msg } = await allchangeMessageStatus({
            status: "1",
          });
          if (code !== 0) {
            this.$message.error(msg);
            return;
          }
          this.$message.success("操作成功");
          this.resetData();
          this.$refs.headerCom && this.$refs.headerCom.getInnerMsgNum();
        });
      } else {
        // 移动端确认弹窗
        Dialog.confirm({
          title: "提示",
          message: "是否确认全部标为已读状态?",
          confirmButtonColor: "#4677b9", //确认按钮上文字的颜色，默认为
        }).then(async () => {
          // this.confirmRead(ids);
          const { code, msg } = await allchangeMessageStatus({
            status: "1",
          });
          if (code !== 0) {
            Toast.error(msg);
            return;
          }
          Toast.success("操作成功");
          this.resetData();
        });
      }
    },
    handleRemarkReaded() {
      const checkList = this.msgList.filter((v) => v.isChecked);
      if (!checkList || checkList.length === 0) {
        this.$message.info("请选择要标记的留言");
        return;
      }
      const ids = checkList.map((v) => v.id);
      this.confirmRead(ids);
      let clientW = document.body.clientWidth;
      if (clientW > 768) this.$refs.headerCom && this.$refs.headerCom.getInnerMsgNum();
    },
    async confirmRead(ids) {
      const { code, msg } = await changeMessageStatus({
        ids: ids,
        status: "1",
      });
      if (code !== 0) {
        this.$message.error(msg);
        return;
      }
      this.$message.success("操作成功");
      this.resetData();
    },
    async resetData() {
      this.page = 1;
      await this.getList();
      this.currentId = this.msgList[0] && this.msgList[0].id;
      if (!this.currentId) {
        this.currentDetail = {};
        return;
      }
      this.getInnerMsgDetail();
    },
  },
};
</script>
<style lang="less">
.inbox-notifications-com {
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__active-bar {
    height: 0;
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@media (min-width: 769px) {
  .mobile-notifications {
    display: none;
  }
  .inbox-notifications-com {
    position: relative;
    width: 100%;
    background: rgb(237, 242, 249);
    .upTop {
      width: 46px;
      position: fixed;
      bottom: 107px;
      right: calc((100% - 1200px) / 2 - 78px);
      cursor: pointer;
      transition-duration: 0.3s;
    }
    .bannerBox {
      width: 100%;
      position: relative;
      height: 265px;
      margin-bottom: 15px;
      overflow-x: hidden;
      .banner {
        width: 100%;
        // -o-object-fit: contain;
        // object-fit: contain;
        height: 100%;
        display: block;
        min-width: 1920px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }
      &::after {
        content: "";
        height: 220px;
        position: absolute;
        top: 0;
        z-index: 1;
        background: rgb(229, 235, 246);
        width: 100%;
        left: 0;
      }
    }

    .list-form-content {
      display: flex;
      align-items: center;
      flex-direction: column;
      height: 100%;

      .main-content {
        width: 100%;
        padding-top: 20px;
        // min-height: calc(100vh - 210px);
        .top-btns {
          margin-bottom: 20px;
          overflow: hidden;
          .btn {
            float: left;
            cursor: pointer;
            background: #ffffff;
            color: #3d6cb0;
            padding: 6px 10px;
            margin-right: 20px;
            border-radius: 6px;
            border: 1px solid #3d6cb0;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
          }
        }
      }
    }
  }
  .content-page {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    min-height: calc(100vh - 285px);
    background: white;
    padding: 15px 20px;

    .page-title {
      font-size: 25px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
    }

    .tabs-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;

      .add-btn {
        padding: 8px 12px;
        background: #3d6cb0;
        border-radius: 6px;
        color: white;
        cursor: pointer;
      }
    }

    .list-form-content {
      display: flex;
      justify-content: space-between;

      .has-content {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
@media (max-width: 768px) {
  .bannerBox, .upTop, .content-page {
    display: none;
  }
  .inbox-notifications-com {
    position: relative;
    z-index: 1200;
    background-color: #fafafa;
  }
  .mobile-top-btns {
    display: flex;
    width: 100%;
    padding: 0.06rem 0.1rem 0.13rem;
    position: fixed;
    top: 1.09rem;
    left: 0;
    background-color: #ffffff;
    z-index: 999;
    span {
      display: inline-block;
      width: 0.72rem;
      height: 0.28rem;
      text-align: center;
      line-height: 0.28rem;
      font-size: 0.12rem;
      font-weight: 500;
    }
    .btn-left {
      flex: 1;
      .btn {
        color: #3d6cb0;
        border-radius: 0.04rem;
        border: 1px solid #3d6cb0;
        margin-right: 0.1rem;
      }
    }
    .btn-right {
      .add-btn {
        color: #ffffff;
        background: #3d6cb0;
        border-radius: 0.04rem;
      }
    }
  }
  .notifications-list {
    padding: 1.64rem 0 0.6rem;
    background-color: #ffffff;
    margin-bottom: 0.4rem;
  }
}
</style>
